<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改志愿者顾问信息')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <!--修改顾问信息列表-->
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-advisermanage-edit" th:object="${vtspAdviserManage}">
            <!--隐藏信息-->
            <input id="chooseVolunteerAreaid" name="volunteerAreaid" type="hidden">
            <input id="chooseVolunteerArea" name="volunteerArea" type="hidden">
            <!--编辑信息-->
            <input name="adviserId" th:field="*{adviserId}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</label>
                <div class="col-sm-8">
                    <input name="adviserName" th:field="*{adviserName}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</label>
                <div class="col-sm-8">
                    <select name="adviserTitle" th:field="*{adviserTitle}" th:with="type=${@dict.getType('adviser_title')}" class="form-control">
                        <option value="">请选择</option>
                        <option th:each="dict : ${type}"
                                th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}">
                        </option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">出生日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input name="adviserBirthday" th:value="${#dates.format(vtspAdviserManage.adviserBirthday, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务：</label>
                <div class="col-sm-8">
                    <select name="adviserJob" th:field="*{adviserJob}" class="form-control">
                        <option value="">请选择</option>
                        <option th:each="item:${dutiesList}"
                                th:value="${item.dutiesId}"
                                th:text="${item.dutiesName}">
                        </option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">单位名称：</label>
                <div class="col-sm-8">
                    <input name="workplaceName" th:field="*{workplaceName}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：</label>
                <div class="col-sm-8">
                    <select name="adviserDegree" th:field="*{adviserDegree}" class="form-control" th:with="type=${@dict.getType('degree')} ">
                        <option value="">请选择</option>
                        <option th:each="dict : ${type}"
                                th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}">
                        </option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">所&nbsp;&nbsp;在&nbsp;&nbsp;地：</label>
                <div class="col-sm-4">
                    <select id="country" name="volunteerCountry" class="form-control country" onchange="showCities(this.value)" required>
                        <option value="">请选择国家</option>
                        <option th:each="item:${countryList}"
                                th:value="${item.areasId}"
                                th:text="${item.areasName}">
                        </option>
                    </select>
                </div>
                <div class="col-sm-4">
                    <select id="city" name="volunteerCity" class="form-control city">
                        <option value="">请选择省市</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</label>
                <div class="col-sm-8">
                    <select name="memberState" th:field="*{memberState}" class="form-control" th:with="type=${@dict.getType('sys_state_id')}">
                        <option value="">请选择</option>
                        <option th:each="dict : ${type}"
                                th:text="${dict.dictLabel}"
                                th:value="${dict.dictValue}">
                        </option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "vtsp/advisermanage";                //志愿者顾问
        var cityList = '[[${cityList}]]';                       //省市列表
        var vtspAreas = '[[${vtspAreas}]]';                     //vtsp_areas
        //用正则表达式替换 &quot; 为 "，并转为JSON
        var cities = JSON.parse(cityList.replace(/&quot;/g,'"'));
        var areas = JSON.parse(vtspAreas.replace(/&quot;/g,'"'));

        //所在地数据回显
        if(areas["parentId"] === 0) //国家
        {
            showCities(areas["areasId"]);           //根据国家确认省市
            $("#country ").val(areas["areasId"]);   //设置Select的Value值为areasId的项选中
            $("#city ").val("");            //省市为空
        }
        else    //省市
        {
            showCities(areas["parentId"]);
            $("#country ").val(areas["parentId"]);   //设置Select的Value值为parentId的项选中
            $("#city ").val(areas["areasId"]);
        }

        //表单设置
        $("#form-advisermanage-edit").validate
        ({
            focusCleanup: true
        });

        //保存修改信息
        function submitHandler()
        {
            if ($.validate.form())
            {
                //保存volunteer_areaid为省市areas_id，获取时可通过parent_id获取国家;若为空则保存为国家areas_id
                if(document.getElementById("city").value === "")
                {
                    let volunteerAreaid = document.getElementById("country").value;
                    $('#chooseVolunteerAreaid').val(volunteerAreaid);
                    //获取国家text
                    let area1 = $('#country').find("option:selected").text();
                    //保存volunteer_area
                    $('#chooseVolunteerArea').val(area1);
                }
                else
                {
                    let volunteerAreaid = document.getElementById("city").value;
                    $('#chooseVolunteerAreaid').val(volunteerAreaid);
                    //获取国家text
                    let area1 = $('#country').find("option:selected").text();
                    //获取省市text
                    let area2 = $('#city').find("option:selected").text();
                    //保存volunteer_area
                    $('#chooseVolunteerArea').val(area1 + area2);
                }

                //保存信息
                $.operate.save(prefix + "/edit", $('#form-advisermanage-edit').serialize());
            }
        }

        //日期格式化
        $("input[name='adviserBirthday']").datetimepicker
        ({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        //所在地根据vtsp_areas的parent_id确认省市（parent_id = 0为国家）
        function showCities(value)
        {
            //获取省市的select
            var city = document.getElementById("city");
            //获取option
            var cityOption = city.getElementsByTagName("option");

            //先删除，后添加，保留第一个选项
            for (var i = 1; i < cityOption.length; i++)
            {
                var option1 = cityOption[i];
                // 删除option
                city.removeChild(option1);
                //数组长度发生变化，需处理
                i--;
            }

            //获取省市下拉框
            //遍历比较省市的parent_id，相符的显示下拉框
            for(var j = 0; j < cities.length; j++)
            {
                //符合条件
                if(cities[j]["parentId"] === Number(value)) //value为string型
                {
                    //省市id
                    var cityId = cities[j]["areasId"];
                    //省市名
                    var cityName = cities[j]["areasName"];
                    //创建option
                    var newOption = document.createElement("option");
                    //创建文本
                    var text = document.createTextNode(cityName);
                    //把文本添加到标签
                    newOption.appendChild(text);
                    //设置value值
                    newOption.setAttribute("value",cityId);
                    //添加到下拉框里面
                    city.appendChild(newOption);
                }
            }
        }

    </script>
</body>
</html>